<template>
	<view class="content">
		<view class="uni-panel-c">
			<view class="uni-panel-top">
				<text class="uni-text-logo">阶段性词汇测试</text>
				<text class="uni-text-count">阶段性词汇测试</text>
			</view>
			<view class="uni-panel-bottom">
				<view class="uni-panel-item">
					<image class="uni-image" src="/static/img/back.png" mode="widthFix" @click="clickBack"></image>
					<view class="uni-panel-item-info">
						<text class="uni-text-item">已检测单词：</text>
						<text class="uni-text-item">{{curIndex}}</text>
					</view>
					<view class="uni-panel-item-info" v-if='book_id'>
						<text class="uni-text-item">剩余单词：</text>
						<text class="uni-text-item">{{listExam.length-curIndex}}</text>
					</view>
					<view class="uni-panel-item-info" v-if='book_id'>
						<text class="uni-text-item">不认识单词：</text>
						<text class="uni-text-item">{{unknownCount}}</text>
					</view>
					<view class="uni-panel-item-info">
						<text class="uni-text-item">正确率：</text>
						<text class="uni-text-item">{{correctRadio}} %</text>
					</view>
				</view>
				<view class="uni-panel-center">
					<text class="uni-text-center" >{{curWord}}</text>
					<image class="uni-image-play" src="/static/img/play.png" mode="widthFix" @click="clickBtnPlay"></image>
				</view>
				<view class="uni-panel">
					<view class="uni-panel-book" v-for="(item, index) in randomZh" :key="index" 
					@click="clickWordItem(item)">
						<image class="uni-image-word" :src="'/static/img/word_zh'+index+'.png'" mode="widthFix" />
						<view class="uni-text-word" :style="{'background-color': item.isSelect ? 'skyblue' : 'white'}">{{item.word_zh}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getExamList, playMusic, editNewWord } from '@/api/api.js';
	import store from "../../store";
	import { HTTP_REQUEST_URL, VOICE_PATH } from '@/config/app.js';
	export default {
		mounted() {
		        // #ifdef APP-PLUS
		        plus.screen.lockOrientation('landscape');
		        // #endif
		    },
		data() {
			return {
				userId: 0,
				accountName: '',
				book_id: 0,
				studyCount: 0,
				curIndex: 0,
				curWord: '',
				randomZh: [],
				listExam: [],
				selectItem: undefined,
				unknownCount: 0,
				correctCount: 0,
				correctRadio: 0,
				isPlayMusic: false,
			}
		},
		onLoad(options) {
			this.book_id = options.book_id;
			const userInfo = store.state.app.userInfo;
			if( userInfo){
				this.userId = userInfo.id;
				this.accountName = userInfo.nickname;
			}
			let student = uni.getStorageSync('student_info');
			if( student){
				this.accountName = student.nickname;
				this.userId = student.id;
			}
				
			let that = this;
			let params = {user_id:this.userId, 
							book_id:options.book_id, 
							study_id:options.study_id,
							date_type:options.date_type};
			getExamList(params).then(res => {
				console.log(res)
				if( res.data ){		
					for( let item of res.data.rows){
						let temp = {word:item.word, randomZh:[], book_id:item.book_id};
						for(let j of item.randomZh){
							temp.randomZh.push({word_zh:j, isSelect:false});
						}
						temp.idxAnswer = Math.floor(Math.random() * (item.randomZh.length+1));
						temp.randomZh.splice(temp.idxAnswer, 0, {word_zh:item.word_zh, isSelect:false});
						temp.randomZh.push({word_zh:'不认识', isSelect:true})
						temp.randomZh.push({word_zh:'下一题', isSelect:true})
						that.listExam.push(temp);
					}
					that.refreshWord();
				}					
			})
		},
		methods: {
			clickBack(){
				uni.navigateBack();
			},
			clickWordItem(item){
				if('下一题' == item.word_zh){
					if( this.curIndex < this.listExam.length){
						let curItem = this.listExam[this.curIndex];
						let selectIndex = curItem.randomZh.findIndex( i => { return i.isSelect });
						if(selectIndex == curItem.idxAnswer){
							this.correctCount++;
						}else{
							// 加入生词本
							if( curItem.book_id){
								let params = {user_id:this.userId,
												book_id:curItem.book_id,
												word:this.curWord,
												is_add:true};
								editNewWord(params).then(res => {
									console.log(res)
								})
							}
						}
						this.correctRadio = (this.correctCount*100/(this.curIndex+1)).toFixed(2);
						if(selectIndex == curItem.randomZh.length-2){
							this.unknownCount++;
						}
						this.curIndex++;
						this.refreshWord();
					}
					if(this.curIndex >= this.listExam.length){
						uni.showModal({
						    title: '提示',
						    content: '考试完毕，您的正确率为 ' + this.correctRadio + ' %',
							showCancel: false,
						    success: function (res) {
						        if (res.confirm) {
						            uni.navigateBack();
						        }
						    }
						});
					}
				}else{
					if(this.selectItem){
						this.selectItem.isSelect = false;
					}
					this.selectItem = item;
					item.isSelect = true;
				}
			},
			refreshWord(){
				if( this.curIndex < this.listExam.length){
					let item = this.listExam[this.curIndex];
					this.curWord = item.word;
					this.randomZh = item.randomZh;
					if(item.randomZh.length > 1){
						this.selectItem = item.randomZh[item.randomZh.length-2];
					}
					this.clickBtnPlay();
				}
			},
			clickBtnPlay(){
				if(!this.isPlayMusic){
					let filename = HTTP_REQUEST_URL + VOICE_PATH + encodeURIComponent(this.curWord) + '.mp3'
					console.log(filename)
					let that = this;
					playMusic( filename, playing=>{
						that.isPlayMusic = playing;
					})
				}
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	.content {
		width: 100%;
		height: 100%;
		background-image: url('../../static/img/bg.jpg');
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.uni-panel-c {
		width: 90%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.uni-panel-top {
		width: 100%;
		height: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.uni-image {
		width: 6%;
	}
	.uni-text-logo{
		color: white;
		font-size: 5vmin;
		text-align: center;
		font-weight: bold;
		letter-spacing: 2rpx;
	}
	.uni-text-count{
		color: white;
		font-size: 4vmin;
		text-align: center;
	}
	
	.uni-panel-bottom-bk {
		position: absolute;
		left: 5%;
		top: 20%;
		width: 90%;
		height: 80%;
		background-color: white;
		opacity: 0.5;
		border-radius: 40rpx;
	}
	.uni-panel-bottom {
		width: 100%;
		height: 90%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		z-index: 1;
	}
	.uni-panel-item {
		background-color: #f5f7e2;
		width: 100%;
		height: 10%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-radius: 20rpx;
	}
	.uni-panel-item-info {
		width: 20%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.uni-text-item{
		font-size: 4vmin;
		color: royalblue;
		margin: 0 1%;
	}
	
	.uni-panel-center {
		width: 50%;
		height: 30%;
		margin: 0 25%;
		background-image: url('../../static/img/word.png');
		background-size: 100% 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.uni-text-center{
		font-size: 10vmin;
		font-weight: bold;
	}
	.uni-image-play {
		width: 10%;
		margin-left: 2%;
		height: auto;
	}
	
	.uni-panel {
		width:100%;
		height:45%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		overflow: auto;
	}
	
	.uni-panel-book {
		height: 48%;
		width: 17%;
		margin-left:  2%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.uni-image-word{
		width: 40%;
		height: 50%;
	}
	
	.uni-text-word{
		width: 100%;
		height: 50%;
		font-size: 3vmin;
		color: black;
		font-weight: bold;
		border-radius: 20rpx;
		box-shadow: 6px 6px 2px 1px rgba(0, 0, 0, .2);
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
